<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrop">
                <div class="todo-header">
                    <input type="text" placeholder="请输入你的任务名称，按回车键确认">
                </div>
                <ul class="todo-main">
                    <li>
                        <label>
                            <input type="checkbox">
                            <span>XXX</span>
                        </label>
                        <button class="btn btn-danger" style="display: none">删除</button>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox">
                            <span>yyyy</span>
                        </label>
                        <button class="btn btn-danger" style="display: none">删除</button>
                    </li>
                </ul>
                <div class="todo-footer">
                    <label>
                        <input type="checkbox"/>
                    </label>
                    <span>
                        <span>已经完成0</span> /全部2
                    </span>
                    <button class="btn btn-danger">清除已经完成任务</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>